<script setup lang="js">

import {onMounted, ref} from "vue";
import request from "@/utils/httpRequest.ts";
import {ElMessage} from "element-plus";

const itemLogisticsList = ref([]);
function loadItemReceiveData(){
  request.get('/item/logistics/receive').then(res =>{
    if (res.code === 2000){
      itemLogisticsList.value = res.data;
    }
  })
}

function handleCheck(id){
  request.post('/item/logistics/check/'+id).then(res =>{
    if (res.code === 2000){
      loadItemReceiveData();
      ElMessage.success('收货成功')
    }
  })
}

onMounted(async ()=>{
  await loadItemReceiveData();
})
</script>

<template>
  <div v-for="item in itemLogisticsList">
    <el-descriptions :title="item.item.name" border>
      <el-descriptions-item
          :rowspan="2"
          :width="140"
          label="物品图片"
          align="center"
      >
        <el-image
            style="width: 100px; height: 100px"
            :src="item.item.imageUrl"
        />
      </el-descriptions-item>
      <el-descriptions-item label="快递提供商">{{item.logisticsProvider}}</el-descriptions-item>
      <el-descriptions-item label="快递单号">{{item.trackingNumber}}</el-descriptions-item>
      <el-descriptions-item label="当前所在位置">{{ item.currentLocation }}</el-descriptions-item>
      <el-descriptions-item label="发货地">{{ item.item.region }}</el-descriptions-item>
      <el-descriptions-item label="最近一次更新时间">
        {{item.updatedTime}}
      </el-descriptions-item>

      <el-descriptions-item label="操作">
        <el-button style="width: 100%" v-if="item.logisticsStatus==='IN_TRANSIT'" type="primary" @click="handleCheck(item.id)">
          收货
        </el-button>
        <el-button style="width: 100%" v-if="item.logisticsStatus==='DELIVERED'" type="success">
          已收货
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
</style>